<template>
  <div class="enterprise">
    <div class="search">
      <el-form ref="searchData" :model="searchData" :inline="true" label-width="100px" class="demo-ruleForm">
        <el-form-item label="企业名称">
          <el-input v-model="searchData.userGroupName" />
        </el-form-item>
        <el-form-item label="用户状态" prop="region">
          <el-select v-model="searchData.disabledFlag" placeholder="请选择状态">
            <el-option label="已启用" value="0" />
            <el-option label="已禁用" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('searchData')">查询</el-button>
          <el-button @click="resetForm('searchData')">重置</el-button>
        </el-form-item>
        <el-button type="success" v-if="buttons.add" @click="handlerSysEnterpriseAdd">新增</el-button>
      </el-form>
    </div>
    <div class="data">
      <el-table :data="tableData" size="medium " border style="width: 100%">
        <el-table-column label="企业名称">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <span size="medium">{{ scope.row.userGroupName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="80">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag v-if="scope.row.disabledFlag!=null && scope.row.disabledFlag==0" type="success" round>已启用</el-tag>
              <el-tag v-if="scope.row.disabledFlag!=null && scope.row.disabledFlag==1" type="danger" round>已禁用</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="会员剩余时间">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.expireIs" type="danger" round>已到期</el-tag>
            <span v-if="!scope.row.expireIs" style="padding: 0;margin: 0">{{ scope.row.expireDtStr }}</span>
          </template>
        </el-table-column>
        <el-table-column label="开通时间">
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span>{{ scope.row.sysAccountStartTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="到期时间">
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span>{{ scope.row.sysAccountEndTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
              <el-button size="mini" type="primary" round v-if="buttons.edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" round v-if="buttons.aclDetail"  @click="handleAcl(scope.$index, scope.row)">授权</el-button>
            <el-button v-if="scope.row.disabledFlag===1 && buttons.status" size="mini" type="danger" round  @click="handleOpen(scope.$index, scope.row)">启用</el-button>
            <el-button v-if="scope.row.disabledFlag===0 && buttons.status" size="mini" type="warning" round @click="handleClose(scope.$index, scope.row)">禁用</el-button>
              <el-button size="mini" type="warning" round v-if="buttons.listRole" @click="handleRole(scope.$index, scope.row)">角色</el-button>
              <el-button size="mini"  round v-if="buttons.userList" @click="handleUser(scope.$index, scope.row)">用户</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        :current-page="searchData.currentPage"
        :page-sizes="[20,50 , 100,200, 300, 400]"
        :page-size="searchData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="searchData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <sys-enterprise-add :sys-enterprise-add-to-child="sysEnterpriseAddToChild" @sysEnterpriseAddToFather="sysEnterpriseAddToFather" />
    <sys-enterprise-modify :sys-enterprise-modify-to-child="sysEnterpriseModifyToChild" @sysEnterpriseModifyToFather="sysEnterpriseModifyToFather" />
    <acls-to-enterprise :acls-to-enterprise-to-child="aclsToEnterpriseToChild" @aclsToEnterpriseToFather="aclsToEnterpriseToFather" />
  </div>
</template>

<script>
import { sysUserGroupPage, detail, aclDetail, status } from '@/api/momo/SysEnterprise'
import SysEnterpriseAdd from './component/SysEnterpriseAdd'
import SysEnterpriseModify from './component/SysEnterpriseModify'
import AclsToEnterprise from './component/AclsToEnterprise'
export default {
  name: 'SysEnterprise',
  components: {
    SysEnterpriseAdd,
    AclsToEnterprise,
    SysEnterpriseModify
  },
  data() {
    return {
      searchData: {
        userGroupName: '',
        currentPage: 1,
        pageSize: 20,
        total: 0,
        disabledFlag: null
      },
      sysEnterpriseAddToChild: '',
      sysEnterpriseModifyToChild: {},
      aclsToEnterpriseToChild: {},
      tableData: [],
      openLoading: {
        loading: false,
        uuid: ''
      },
      closeLoading: {
        loading: false,
        uuid: ''
      },
      buttons: {
        add: false,
        aclsToVip: false,
        edit: false,
        aclDetail: false,
        listRole: false,
        userList: false,
        detail: false
      }
    }
  },
  created() {
    this.loadSysUserGroupPage()
    if (this.$route.meta.buttons) {
      this.buttons = Object.assign(this.buttons, this.$route.meta.buttons)
    }
  },
  methods: {
    handlerSysEnterpriseAdd() {
      this.sysEnterpriseAddToChild = '' + Math.random()
    },
    handleSizeChange(val) {
      this.searchData.pageSize = val
      this.loadSysUserGroupPage()
    },
    handleCurrentChange(val) {
      this.searchData.currentPage = val
      this.loadSysUserGroupPage()
    },
    handleEdit(index, row) {
      detail(row).then(res => {
        res = res.data
        this.sysEnterpriseModifyToChild = res
      })
    },
    handleAcl(index, row) {
      aclDetail(row).then(res => {
        res = res.data
        res.uuid = row.uuid
        res.userGroupName = row.userGroupName
        this.aclsToEnterpriseToChild = res
      })
    },
    handleRole(index, row) {
      this.$router.push({
        path: `/momo/author/enterprise/roleList/` + row.uuid
      })
    },
    handleUser(index, row) {
      this.$router.push({
        path: `/momo/author/enterprise/userList/` + row.uuid
      })
    },
    handleDelete(index, row) {
    },
    submitForm(formName) {
      this.loadSysUserGroupPage()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    sysEnterpriseAddToFather() {
      this.loadSysUserGroupPage()
    },
    sysEnterpriseModifyToFather() {
      this.loadSysUserGroupPage()
    },
    sysEnterpriseRoleToFather() {
      this.loadSysUserGroupPage()
    },
    aclsToEnterpriseToFather() {
      // this.loadSysUserGroupPage()
    },
    handleOpen(index, row) {
      this.showOpenLoading(row.uuid)
      this.$confirm('是否启用', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        row.enterpriseUuid = this.$route.params.uuid
        status(row).then(res => {
          row.disabledFlag = 0
          this.showOpenLoading()
          this.$message({
            type: 'success',
            message: res.data
          })
          // this.loadSysRoleList()
        })
      }).catch(() => {
        this.showOpenLoading()
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    handleClose(index, row) {
      this.showCloseLoading(row.uuid)
      this.$confirm('是否禁用?', '提示', {
        confirmButtonText: '禁用',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.showCloseLoading()
        row.enterpriseUuid = this.$route.params.uuid
        status(row).then(res => {
          row.disabledFlag = 1
          this.$message({
            type: 'success',
            message: res.data
          })
          // this.loadSysRoleList()
        })
      }).catch(() => {
        this.showCloseLoading()
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    showCloseLoading(uuid) {
      if (uuid === null || uuid === undefined) {
        this.closeLoading.loading = false
        this.closeLoading.uuid = ''
      } else {
        this.closeLoading.loading = true
        this.closeLoading.uuid = uuid
      }
    },
    showOpenLoading(uuid) {
      if (uuid === null || uuid === undefined) {
        this.openLoading.loading = false
        this.openLoading.uuid = ''
      } else {
        this.openLoading.loading = true
        this.openLoading.uuid = uuid
      }
    },
    loadSysUserGroupPage() {
      sysUserGroupPage(this.searchData).then(res => {
        res = res.data
        this.tableData = res.list
        this.searchData.total = res.total
        this.searchData.currentPage = res.currentPage
        this.searchData.pageSize = res.pageSize
      })
    }
  }
}
</script>

<style scoped>
  .enterprise{
    background-color: #fff;
    margin: 2px 5px;
    border-radius: 5px;
  }
  .search{
    padding-top: 20px;
  }
  .data{
    padding: 4px;
  }
  .page{
    margin-top: 20px;
    padding-bottom: 20px;
  }
</style>
